<template>
	<view>
		<uni-notice-bar :single="true" text="期待同学们的完美作品!" :showIcon="true" :scrollable="true"  style="margin: 0;"></uni-notice-bar>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) of result.carouselItems" :key="i">
				<view class="swiper-item">
					<image class="swip" :src="`http://101.96.128.94:9999/${item.img}`" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">
			<image class="icon" src="/static/ProjectResource/icons/icon3.png" mode="widthFix"></image>
			<text style="font-size: 20px;">1F/首页推荐</text>
		</view>
		<uni-grid :column="2" :square="false" :showBorder="false" :highlight="false">
			<uni-grid-item v-for="(item,i) of result.newArrivalItems" style="width: 360rpx; margin: 5rpx;border: 1px solid gray;border-radius: 5px;box-sizing: border-box;padding: 5rpx;">
				<view class="img">
					<image class="shop" :src="`http://101.96.128.94:9999/${item.pic}`" mode="widthFix"></image>
				</view>
					<text class="ititle">{{item.title}}</text>
					<text class="details">{{item.details}}</text>
					<text class="price">¥{{item.price}}</text>
					<button class="btn" type="primary" size="mini">查看详情</button>
			</uni-grid-item>
		</uni-grid>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
export default {
	data() {
		return {
			url:"/xz/product/index.php",
			url_details:"/xz/product/list.php",
			result:{},
			status:"more",
			pno:1,
			data:[]
		};
	},
	// onReachBottom() {
	// 	this.status = "loading"
	// 	uni.request({
	// 		url: this.url_details,
	// 		method: 'GET',
	// 		data: {pno:this.pno+1},
	// 		success: res => {
	// 			console.log(res)
	// 			res.data.newArrivalItems = this.result.newArrivalItems.concat(res.data.newArrivalItems)
	// 			this.result = res.data
	// 			this.pno++
	// 			this.status = "more"
	// 		},
	// 		fail: () => {},
	// 		complete: () => {}
	// 	});
	// },
	onReady() {
		this.getData()
	},
	methods: {
		getData(){
			uni.request({
				url: this.url,
				success: res => {
					console.log(res)
					this.result = res.data
				}
			});
			uni.request({
				url: this.url_details,
				method: 'GET',
				data: {pno:1},
				success: res => {
					console.log(res);
					this.data = res.data
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style>
	
	.swip {
		width: 100%;
	}
	.title{
		display: flex;
		flex-flow: row nowrap;
		margin-top: 20rpx;
	}
	.ititle {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin: 2px 3px 0;
	}
	.icon {
		width: 50rpx;
	}
	.img {
		width: 100%;
		height: 300rpx;
	}
	.shop {
		width: 100%;
	}
	.details {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 12px;
		color: gray;
		margin: 2px 3px 0;
	}
	.price {
		font-size: 24px;
		color: red;
		margin: 2px 3px 0;
	}
	.btn {
		margin-left: 3px;
		margin-top: 2px;
	}
	.item {
		border: 1px solid #FF0000;
		border-radius: 5px;
		margin: 3px;
	}
</style>
